<template>
  <div class="statistics">
    <div v-for="(item, index) in statisticsType" :key="index">
      <div class="real-time-title" @click="getStatistics(index)">
        <img src="@/assets/biaoti@2x.png" />
        <span class="title">{{ item.title }}</span>
        <span class="value">{{ statistics[index] }}</span>
        <span class="unit">{{ item.unit }}</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "HomePageStatistics",
  props: {
    statistics: {
      type: Object,
      default: () => { }
    },
  },
  computed: {},
  created() {

  },
  mounted() {

  },
  data() {
    return {
      statisticsType: {
        userSum: {
          title: "识别人数",
          unit: "人"
        },
        durationAvg: {
          title: "平均业务办理时长",
          unit: "分钟"
        },
        warningSum: {
          title: "预警次数",
          unit: "次"
        },
        disposeWarning: {
          title: "处理预警次数",
          unit: "次"
        },
        flowMax: {
          title: "人流量最多",
          unit: ""
        }
      },
    }
  },
  methods: {
    getStatistics(index){
      this.$emit('homeStatistics',index)
    }
  }
};
</script>

<style scoped lang="scss">
.statistics {
  display: flex;
  gap:40px;
  .real-time-title {
    cursor: pointer;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 16px;
    background: url(@/assets/rectangle.png) no-repeat;
    background-color: rgba(23, 24, 26, 0.7);

    img {
      width: 24px;
      height: 24px;
      margin: 0 8px;
    }
  }

  span {
    font-size: 18px;
    color: #FFFFFF;
  }

  .value {
    font-size: 36px;
    color: #5CFBFF;
    margin-left: 35px;
  }

  .title {}

  .unit {
    margin-left: 5px;
  }

}
</style>
